<template>
  <div>
    <el-dialog
      title="添加可配送区域"
      :visible.sync="dialogVisibles"
      :before-close="cancel"
      width="50%"
    >
      <div class="container">
        <div class="scrollbars">
          <p
            v-for="(item, index) in oneArr"
            :key="index"
            @click="oneTag(item, 1, item.disabled)"
          >
            <el-checkbox
              v-model="item.checked"
              :disabled="item.disabled"
              class="pscheck"
              @change="
                change(item, 1, oneid, oneArr, twoArr, threeArr, fourArr)
              "
            ></el-checkbox>
            <span class="pspan">{{ item.name }}</span>
            <i class="el-icon-arrow-right psicon"></i>
          </p>
        </div>
        <div v-if="twoArr.length > 0" class="scrollbars">
          <p
            v-for="(item, index) in twoArr"
            :key="index"
            @click="oneTag(item, 2)"
          >
            <el-checkbox
              v-model="item.checked"
              :disabled="chlid"
              class="pscheck"
              @change="
                change(item, 2, twoid, oneArr, twoArr, threeArr, fourArr)
              "
            ></el-checkbox>
            <span class="pspan">{{ item.name }}</span>
            <i class="el-icon-arrow-right psicon"></i>
          </p>
        </div>
        <div v-if="threeArr.length > 0" class="scrollbars">
          <p
            v-for="(item, index) in threeArr"
            :key="index"
            @click="oneTag(item, 3)"
          >
            <el-checkbox
              v-model="item.checked"
              :disabled="chlid"
              class="pscheck"
              @change="
                change(item, 3, threeid, oneArr, twoArr, threeArr, fourArr)
              "
            ></el-checkbox>
            <span class="pspan">{{ item.name }}</span>
            <i class="el-icon-arrow-right psicon"></i>
          </p>
        </div>
        <div v-if="fourArr.length > 0" class="scrollbars">
          <p v-for="(item, index) in fourArr" :key="index">
            <el-checkbox
              v-model="item.checked"
              :disabled="chlid"
              class="pscheck"
              @change="
                change(item, 4, fourid, oneArr, twoArr, threeArr, fourArr)
              "
            ></el-checkbox>
            <span class="pspan">{{ item.name }}</span>
          </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button
          type="
                   primary"
          @click="submit('save')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { SETDISTRIBUTIONPLAN } from "@/service/public";
import jsons from "@/assets/json/fourLevelLinkage.json";
var _ = require("lodash");

export default {
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    dataJson: {
      type: () => {},
      default: {}
    },
    filterArr: {
      type: () => [],
      default: []
    }
  },

  data() {
    return {
      oneArr: [],
      twoArr: [],
      threeArr: [],
      fourArr: [],
      oneid: [],
      twoid: [],
      threeid: [],
      fourid: [],
      aid1: "",
      aid2: "",
      idJson: {},
      areaJson: {},
      chlid: false
    };
  },
  computed: {
    dialogVisibles: {
      get() {
        return this.dialog;
      },
      set(val) {
        this.dialogVisibles = val;
      }
    }
  },
  watch: {
    dialog(v) {
      if (v) {
        this.oneArr = _.cloneDeep(jsons.data);
        this.filterArr.filter(ele => {
          this.oneArr.forEach(eles => {
            if (ele === eles.id) {
              eles.disabled = true;
            }
          });
        });
        if (!this.dataJson.areaJson) return false;
        this.areaJson = JSON.parse(this.dataJson.areaJson);
        for (let key in this.areaJson) {
          this.oneArr.forEach(eles => {
            if (key === eles.id) {
              eles.disabled = false;
            }
          });
        }
        this.idJson = JSON.parse(this.dataJson.areaJson);
        for (let key in this.areaJson) {
          this.oneArr.forEach(ele => {
            if (ele.id === key) {
              ele.checked = true;
            }
          });
        }
      }
    },
    idJson() {}
  },
  created() {},
  methods: {
    oneTag(e, num, disabled) {
      // let arr
      if (disabled) {
        this.chlid = disabled;
      }

      if (num === 1) {
        this.twoArr = e.children;

        if (this.aid1 !== e.id) {
          this.threeArr = [];
          this.fourArr = [];
        }
        this.aid1 = e.id;
        // arr = this.twoArr
      }
      if (num === 2) {
        this.threeArr = e.children;
        if (this.aid2 !== e.id) {
          this.fourArr = [];
        }
        this.aid2 = e.id;
        // arr = this.threeArr
      }
      if (num === 3) {
        this.fourArr = e.children;
        // arr = this.fourArr
      }
      this.jsonCreated(e, num);
    },
    jsonCreated(e, num) {
      if (typeof this.areaJson !== "object") return false;
      let searchJson = this.search(this.areaJson, e.id);
      if (searchJson) {
        if (searchJson.street_checkAll === "true") {
          this.oneArr.some(ele => {
            if (ele.id === searchJson.currentId) {
              this.change(
                e,
                1,
                this.oneid,
                this.oneArr,
                this.twoArr,
                this.threeArr,
                this.fourArr
              );
              return true;
            }
          });
        } else {
          if (!searchJson.ids && searchJson.checkAll === "true") {
            this.change(
              e,
              num,
              this.oneid,
              this.oneArr,
              this.twoArr,
              this.threeArr,
              this.fourArr
            );
          } else {
            e.children.forEach(ele => {
              for (let key in searchJson.ids) {
                if (key === ele.id) {
                  ele.checked = true;
                  this.change(
                    ele,
                    num + 1,
                    this.oneid,
                    this.oneArr,
                    this.twoArr,
                    this.threeArr,
                    this.fourArr,
                    "edit"
                  );
                  break;
                }
              }
            });
          }
        }
      }
    },
    search(object, value) {
      for (let key in object) {
        if (key === value) return object[key];
        if (typeof object[key] === "object") {
          let temp = this.search(object[key], value);
          if (temp) return temp;
        }
      }
    },
    change(e, num, arrid, oneArr, twoArr, threeArr, fourArr, type) {
      if (num === 1) {
        if (e.checked) {
          this.idJson[e.id] = {
            ids: {},
            street_checkAll: true,
            checkAll: true,
            currentId: e.id,
            parentid: "",
            name: e.name
          };
          e.children.forEach(ele => {
            this.idJson[e.id].ids[ele.id] = {
              ids: {},
              checkAll: true,
              currentId: ele.id,
              parentid: ele.parentid,
              name: ele.name
            };
            ele.children.forEach(eles => {
              this.idJson[e.id].ids[ele.id].ids[eles.id] = {
                ids: {},
                checkAll: true,
                currentId: eles.id,
                parentid: eles.parentid,
                name: eles.name
              };
              eles.children.forEach(eless => {
                this.idJson[e.id].ids[ele.id].ids[eles.id].ids[eless.id] = {
                  currentId: eless.id,
                  parentid: eless.parentid,
                  name: eless.name
                };
              });
            });
          });
        } else {
          delete this.idJson[e.id];
        }
      }

      if (num === 2) {
        if (e.checked) {
          let lock = true;
          let sname;
          for (let key in this.idJson) {
            if (key === e.parentid) {
              lock = false;
            } else {
              lock = true;
            }
          }
          oneArr.forEach(ele => {
            if (ele.id === e.parentid) {
              sname = ele.name;
            }
          });
          if (lock) {
            if (!this.idJson[e.parentid]) {
              this.idJson[e.parentid] = {
                ids: {},
                street_checkAll: true,
                checkAll: true,
                currentId: e.parentid,
                parentid: "",
                name: sname
              };
            }
            this.idJson[e.parentid].ids[e.id] = {
              ids: {},
              checkAll: true,
              currentId: e.id,
              parentid: e.parentid,
              name: e.name
            };
          } else {
            this.idJson[e.parentid].ids[e.id] = {
              ids: {},
              checkAll: true,
              currentId: e.id,
              parentid: e.parentid,
              name: e.name
            };
          }

          e.children.forEach(ele => {
            this.idJson[e.parentid].ids[e.id].ids[ele.id] = {
              ids: {},
              checkAll: true,
              currentId: ele.id,
              parentid: ele.parentid,
              name: ele.name
            };
            ele.children.forEach(eles => {
              this.idJson[e.parentid].ids[e.id].ids[ele.id].ids[eles.id] = {
                currentId: eles.id,
                parentid: eles.parentid,
                name: eles.name
              };
            });
          });
        } else {
          delete this.idJson[e.parentid].ids[e.id];
          if (JSON.stringify(this.idJson[e.parentid].ids) === "{}") {
            delete this.idJson[e.parentid];
          }
        }
        let len = 0;
        if (this.idJson[e.parentid]) {
          twoArr.forEach(ele => {
            if (ele.checked) {
              len++;
            }
          });
          if (len === twoArr.length) {
            this.idJson[e.parentid].street_checkAll = true;
            this.idJson[e.parentid].checkAll = true;
          } else {
            this.idJson[e.parentid].street_checkAll = false;
            this.idJson[e.parentid].checkAll = false;
          }
        }
      }

      if (num === 3) {
        let one;
        let sname, ssname;
        oneArr.forEach(ele => {
          ele.children.some(s => {
            if (s.id === e.parentid) {
              one = s.parentid;
              sname = ele.name;
              ssname = s.name;
              return true;
            }
          });
        });

        if (e.checked) {
          let lock = true;
          for (let key in this.idJson) {
            for (let keys in this.idJson[key].ids) {
              if (keys === e.parentid) {
                lock = false;
              } else {
                lock = true;
              }
            }
          }
          if (lock) {
            if (!this.idJson[one]) {
              this.idJson[one] = {
                ids: {},
                street_checkAll: false,
                checkAll: false,
                currentId: e.parentid,
                parentid: "",
                name: sname
              };
            }
            if (!this.idJson[one].ids[e.parentid]) {
              this.idJson[one].ids[e.parentid] = {
                ids: {},
                checkAll: false,
                currentId: e.parentid,
                parentid: one,
                name: ssname
              };
            }

            this.idJson[one].ids[e.parentid].ids[e.id] = {
              ids: {},
              checkAll: true,
              currentId: e.id,
              parentid: e.parentid,
              name: e.name
            };
          } else {
            this.idJson[one].ids[e.parentid].ids[e.id] = {
              ids: {},
              checkAll: true,
              currentId: e.id,
              parentid: e.parentid,
              name: e.name
            };
          }
          e.children.forEach(ele => {
            this.idJson[one].ids[e.parentid].ids[e.id].ids[ele.id] = {
              currentId: ele.id,
              parentid: ele.parentid,
              name: ele.name
            };
          });
        } else {
          delete this.idJson[one].ids[e.parentid].ids[e.id];
          if (JSON.stringify(this.idJson[one].ids[e.parentid].ids) === "{}") {
            delete this.idJson[one].ids[e.parentid];
          }
          if (JSON.stringify(this.idJson[one].ids) === "{}") {
            delete this.idJson[one];
          }
        }
        let len = 0;
        let len1 = 0;

        threeArr.forEach(ele => {
          if (ele.checked) {
            len1++;
          }
        });

        twoArr.forEach(ele => {
          if (ele.checked) {
            len++;
          }
        });
        if (this.idJson[one]) {
          if (this.idJson[one].ids[e.parentid]) {
            if (len1 === threeArr.length) {
              this.idJson[one].ids[e.parentid].checkAll = true;
            } else {
              this.idJson[one].ids[e.parentid].checkAll = false;
            }
          }
          if (len === twoArr.length && len1 === threeArr.length) {
            this.idJson[one].street_checkAll = true;
            this.idJson[one].checkAll = true;
          } else {
            this.idJson[one].street_checkAll = false;
            this.idJson[one].checkAll = false;
          }
        }
      }

      if (num === 4) {
        let one, two;
        let sname, ssname, sssname;
        oneArr.forEach(ele => {
          ele.children.some(eles => {
            eles.children.some(s => {
              if (s.id === e.parentid) {
                one = ele.id;
                two = eles.id;
                sname = ele.name;
                ssname = eles.name;
                sssname = s.name;
                return true;
              }
            });
          });
        });
        if (e.checked) {
          let lock = true;
          for (let key in this.idJson) {
            for (let keys in this.idJson[key].ids) {
              for (let keyss in this.idJson[key].ids[keys].ids) {
                if (keyss === e.parentid) {
                  lock = false;
                } else {
                  lock = true;
                }
              }
            }
          }
          if (lock) {
            if (!this.idJson[one]) {
              this.idJson[one] = {
                ids: {},
                street_checkAll: false,
                checkAll: false,
                currentId: e.parentid,
                parentid: "",
                name: sname
              };
            }
            if (!this.idJson[one].ids[two]) {
              this.idJson[one].ids[two] = {
                ids: {},
                checkAll: false,
                currentId: e.parentid,
                parentid: one,
                name: ssname
              };
            }
            this.idJson[one].ids[two].ids[e.parentid] = {
              ids: {},
              checkAll: false,
              currentId: e.parentid,
              parentid: two,
              name: sssname
            };
            this.idJson[one].ids[two].ids[e.parentid].ids[e.id] = {
              currentId: e.id,
              parentid: e.parentid,
              name: e.name
            };
          } else {
            this.idJson[one].ids[two].ids[e.parentid].ids[e.id] = {
              currentId: e.id,
              parentid: e.parentid,
              name: e.name
            };
          }
        } else {
          delete this.idJson[one].ids[two].ids[e.parentid].ids[e.id];
        }
        if (
          JSON.stringify(this.idJson[one].ids[two].ids[e.parentid].ids) === "{}"
        ) {
          delete this.idJson[one].ids[e.parentid];
        }
        if (JSON.stringify(this.idJson[one].ids[two].ids) === "{}") {
          delete this.idJson[one].ids[two];
        }
        if (JSON.stringify(this.idJson[one].ids) === "{}") {
          delete this.idJson[one];
        }
        let len = 0;
        let len1 = 0;
        let len2 = 0;
        fourArr.forEach(ele => {
          if (ele.checked) {
            len2++;
          }
        });
        if (this.idJson[one].ids[two].ids[e.parentid]) {
          if (len2 === fourArr.length) {
            this.idJson[one].ids[two].ids[e.parentid].checkAll = true;
          } else {
            this.idJson[one].ids[two].ids[e.parentid].checkAll = false;
          }
        }

        threeArr.forEach(ele => {
          if (ele.checked) {
            len1++;
          }
        });
        if (this.idJson[one].ids[two]) {
          if (len1 === threeArr.length && len2 === fourArr.length) {
            this.idJson[one].ids[two].checkAll = true;
          } else {
            this.idJson[one].ids[two].checkAll = false;
          }
        }

        twoArr.forEach(ele => {
          if (ele.checked) {
            len++;
          }
        });
        if (this.idJson[one]) {
          if (
            len === twoArr.length &&
            len1 === threeArr.length &&
            len2 === fourArr.length
          ) {
            this.idJson[one].street_checkAll = true;
            this.idJson[one].checkAll = true;
          } else {
            this.idJson[one].street_checkAll = false;
            this.idJson[one].checkAll = false;
          }
        }
      }
      this.checkedAll(
        e,
        e.checked,
        num,
        oneArr,
        twoArr,
        threeArr,
        fourArr,
        type
      );
    },
    checkedAll(e, t, num, oneArr, twoArr, threeArr, fourArr, type) {
      if (num === 1) {
        if (type !== "edit") {
          e.children.forEach(ele => {
            ele.checked = t;
            ele.children.forEach(eles => {
              eles.checked = t;
              eles.children.forEach(eless => {
                eless.checked = t;
              });
            });
          });
        }
      }
      if (num === 2) {
        if (type !== "edit") {
          e.children.forEach(ele => {
            ele.checked = t;
            ele.children.forEach(eles => {
              eles.checked = t;
            });
          });
        }
        if (!e.checked) {
          let s = 0;
          twoArr.forEach(ele => {
            if (ele.checked) {
              s++;
            }
          });
          if (s === 0) {
            oneArr.forEach(ele => {
              if (ele.id === e.parentid) {
                ele.checked = false;
              }
            });
          }
        } else {
          oneArr.forEach(ele => {
            if (ele.id === e.parentid) {
              ele.checked = true;
            }
          });
        }
      }
      if (num === 3) {
        if (type !== "edit") {
          e.children.forEach(ele => {
            ele.checked = t;
          });
        }
        if (!e.checked) {
          let s = 0;
          threeArr.forEach(ele => {
            if (ele.checked) {
              s++;
            }
          });
          if (s === 0) {
            let ss = 0;
            twoArr.forEach(ele => {
              if (ele.id === e.parentid) {
                ele.checked = false;
              }
              if (ele.checked) {
                ss++;
              }
            });
            if (ss === 0) {
              oneArr.forEach(ele => {
                twoArr.forEach(eles => {
                  if (ele.id === eles.parentid) {
                    ele.checked = false;
                  }
                });
              });
            }
          }
        } else {
          twoArr.forEach(ele => {
            if (ele.id === e.parentid) {
              ele.checked = true;
            }
          });
          oneArr.forEach(ele => {
            twoArr.forEach(eles => {
              if (ele.id === eles.parentid) {
                ele.checked = true;
              }
            });
          });
        }
      }
      if (num === 4) {
        if (!e.checked) {
          let s = 0;
          fourArr.forEach(ele => {
            if (ele.checked) {
              s++;
            }
          });

          if (s === 0) {
            let ss = 0;
            threeArr.forEach(ele => {
              if (ele.id === e.parentid) {
                ele.checked = false;
              }
              if (ele.checked) {
                ss++;
              }
            });
            if (ss === 0) {
              let sss = 0;
              twoArr.forEach(ele => {
                threeArr.forEach(eles => {
                  if (ele.id === eles.parentid) {
                    ele.checked = false;
                  }
                  if (ele.checked) {
                    sss++;
                  }
                });
                if (sss === 0) {
                  oneArr.forEach(ele => {
                    twoArr.forEach(eles => {
                      if (ele.id === eles.parentid) {
                        ele.checked = false;
                      }
                    });
                  });
                }
              });
            }
          }
        } else {
          threeArr.forEach(ele => {
            if (ele.id === e.parentid) {
              ele.checked = true;
            }
          });

          twoArr.forEach(ele => {
            threeArr.forEach(eles => {
              if (ele.id === eles.parentid) {
                ele.checked = true;
              }
            });
          });
          oneArr.forEach(ele => {
            twoArr.forEach(eles => {
              if (ele.id === eles.parentid) {
                ele.checked = true;
              }
            });
          });
        }
      }
    },
    cancel() {
      this.oneArr = [];
      this.twoArr = [];
      this.threeArr = [];
      this.fourArr = [];
      // this.oneid = []
      // this.twoid = []
      // this.threeid = []
      // this.fourid = []
      this.aid1 = "";
      this.aid2 = "";
      this.idJson = {};
      this.areaJson = {};
      this.$emit("dialogShow");
    },

    submit() {
      let arr = _.cloneDeep(this.idJson);
      for (let key in arr) {
        let arrs = arr[key];
        if (arrs.checkAll) {
          arrs.ids = {};
        } else {
          for (let keys in arrs.ids) {
            let arrss = arrs.ids[keys];
            if (arrss.checkAll) {
              arrss.ids = {};
            } else {
              for (let keyss in arrss.ids) {
                let arrsss = arrss.ids[keyss];
                if (arrsss.checkAll) {
                  arrsss.ids = {};
                }
              }
            }
          }
        }
      }
      // for (let key in arr) {
      //   if (arr[key].currentId) {
      //     this.oneid.push(arr[key].currentId)
      //   }
      //   let arrs = arr[key]
      //   for (let keys in arrs) {
      //     if (arrs[keys].currentId) {
      //       this.twoid.push(arrs[keys].currentId)
      //     }
      //     let arrss = arrs[keys]
      //     for (let keyss in arrss) {
      //       if (arrss[keyss].currentId) {
      //         this.threeid.push(arrss[keyss].currentId)
      //       }
      //       let arrsss = arrs[keys]
      //       for (let keysss in arrsss) {
      //         if (arrsss[keysss].currentId) {
      //           this.fourid.push(arrsss[keysss].currentId)
      //         }
      //       }
      //     }
      //   }
      // }
      // let c = []
      // for (var a = 0; a < 20000; a++) {
      //   c.push('ZWliYJOS')
      // }
      // c = c.join(',')
      // this.oneid = Array.from(new Set(this.oneid));
      // this.twoid = Array.from(new Set(this.twoid));
      // this.threeid = Array.from(new Set(this.threeid));
      // this.fourid = Array.from(new Set(this.fourid));
      // let areaArr = { oneid: this.oneid, twoid: this.twoid, threeid: this.threeid, fourid: this.fourid }
      // plan_id: plan_id JSON.stringify(areaArr)

      SETDISTRIBUTIONPLAN({
        flag: "save",
        tableid: this.dataJson.tableid,
        areaJson: arr,
        plan_id: this.dataJson.plan_id
      }).then(res => {
        let { code, data } = res;
        if (code === 200) {
          this.oneArr = [];
          this.twoArr = [];
          this.threeArr = [];
          this.fourArr = [];
          // this.oneid = []
          // this.twoid = []
          // this.threeid = []
          // this.fourid = []
          this.aid1 = "";
          this.aid2 = "";
          this.idJson = {};
          this.areaJson = {};
          this.$emit("dialogShow", data);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  div {
    width: 20%;
    height: 400px;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-right: 10px;
    padding: 6px;
    p {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      display: flex;
      cursor: pointer;
      .pscheck {
        width: 3%;
        margin-right: 20px;
        line-height: 30px;
      }
      .pspan {
        width: 80%;
        line-height: 30px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .psicon {
        padding-top: 3px;
        line-height: 30px;
      }
    }
  }
}
</style>
